<template>
  <div class="cartheader">
    <div class="innercartheader clear">
      <div class="logo_box fl">
        <router-link to="/">
          <img src="@/assets/img/logobox/M.png" />
          <a-icon type="home" />
        </router-link>
      </div>
      <h2 class="fl">{{headername}}</h2>
      <p class="fl" v-show="istitle">温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</p>
      <p class="order fr"><a-icon type="file-text" />我的订单</p>
      <p class="fr">{{ current }}</p>
    </div>
  </div>
</template>

<script>
export default {
   props: ["headername","istitle"],
  computed: {
    current: function () {
      return this.$store.getters.getCurrentuser;
    },
  },
};
</script>

<style lang="scss" scoped>
.cartheader {
  border-bottom: 2px solid $color;
  .innercartheader {
    padding: 20px 0;
    width: 1200px;
    margin: 0 auto;
    height: 45px;
    line-height: 45px;
    box-sizing: content-box;
    .logo_box {
      cursor: pointer;
      background-color: black;
      overflow: hidden;
      margin-right: 20px;
      a {
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        position: relative;
        img {
          width: 45px;
          height: 45px;
          transition: transform 0.3s;
        }
        .anticon {
          font-size: 28px;
          color: #fff;
          margin-left: -80px;
          transition: transform 0.3s;
        }
        &:hover .anticon {
          transform: translate(42px);
          transition: transform 0.3s;
        }
        &:hover img {
          transform: translate(45px);
          transition: transform 0.3s;
        }
      }
    }
    h2 {
      font-weight: bolder;
      color: black;
      margin: 0 20px 0 0;
    }
    p {
      margin: 0;
      cursor: pointer;
    }
    .order {
      margin-left: 10px;
      .anticon{
        margin-right: 3px;
      }
    }
  }
}
</style>